<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>JQuery Dynamic Tab</title>
        <script src="js/jquery.js" type="text/javascript" language="javascript"></script>
        
        <script type="text/javascript">
        $(function() {
            var total_tabs = 0;
            
            // initialize first tab
            total_tabs++;
            addtab(total_tabs);
            
            $("#addtab, #litab").click(function() {
                total_tabs++;
                $("#tabcontent p").hide();
                addtab(total_tabs);
                return false;
            });
            
            function addtab(count) {
                var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
                $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab '+count+'&nbsp;&nbsp;'+closetab+'</li>');
                $("#tabcontent").append('<p id="c'+count+'">Tab Content '+count+'</p>');
                
                $("#tabul li").removeClass("ctab");
                $("#t"+count).addClass("ctab");
                
                $("#t"+count).bind("click", function() {
                    $("#tabul li").removeClass("ctab");
                    $("#t"+count).addClass("ctab");
                    $("#tabcontent p").hide();
                    $("#c"+count).fadeIn('slow');
                });
                
                $("#close"+count).bind("click", function() {
                    // activate the previous tab
                    $("#tabul li").removeClass("ctab");
                    $("#tabcontent p").hide();
                    $(this).parent().prev().addClass("ctab");
                    $("#c"+count).prev().fadeIn('slow');
                    
                    $(this).parent().remove();
                    $("#c"+count).remove();
                    return false;
                });
            }
        });
        </script>
        <style type="text/css">
            * {
                font-family: Arial;
            }
            body {
                padding: 0;
                margin: 0;
            }
            #main {
                background: #0099cc;
                margin-top: 0;
                padding: 2px 0 4px 0;
                text-align: center;
            }
            #main a {
                color: #ffffff;
                text-decoration: none;
                font-size: 12px;
                font-weight: bold;
                font-family: Arial;
            }
            #main a:hover {
                text-decoration: underline;
            }
            #container {
                margin: 0 auto;
                width: 800px;
                margin-top: 50px;
            }
            #tabul {
                padding: 0;
                margin: 0;
                padding: 5px 0;
                z-index: 10;
            }
            #tabul li {
                display: inline;
                -webkit-border-radius: .3em .3em 0 0;
                -moz-border-radius: .3em .3em 0 0;
                border-radius: .3em .3em 0 0;
                cursor: pointer;
            }
            .ntabs {
                background: #BDC7D5;
                margin-right: 1px;
                font-size: 11px;
                font-weight: bold;
                color: #333;
                border: 1px solid #BDC7D5;
                padding: 5px 3px 5px 8px;
            }
            .add {
                padding: 5px 8px;
            }
            #addtab {
                font-size: 16px;
                text-decoration: none;
                position: relative;
                top: 2px;
                color: #333;
            }
            #addtab:hover {
                color: #999;
            }
            .ctab {
                background: #E7EDF6;
                position: relative;
                top: 2px;
                border-bottom-width: 0;
            }
            .close {
                text-decoration: none;
                color: #999;
                font-weight: bold;
                font-size: 14px;
                padding: 0 4px;
                -webkit-border-radius: .2em;
                -moz-border-radius: .2em;
                border-radius: .2em;
            }
            .close:hover {
                background: #999;
                color: #333;
            }
            #tabcontent {
	        z-index: -10;
                position: relative;
                top: -1px;
                border: 1px solid #BDC7D5;
                background: #E7EDF6;
                padding: 10px;
                text-align: center;
                font-weight: bold;
                color: #666;
                font-size: 24px;
            }
        </style>
    </head>
    <body>
        
        
    <div id="container">
        <ul id="tabul">
            <li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
        </ul>            
        <div id="tabcontent"></div>
    </div>
    </body>
</html>